<template>
  <div class="myAccount">
    <div style="width: 50%">
      <h1 class="title1">账号信息</h1>
      <div class="content">
        <ul class="">
          <li class="flex jcsb cl">
            <span>登录账号</span><span>{{ userInfo.username }}</span>
          </li>
          <li class="flex jcsb cl">
            <span>用户昵称</span><span>{{ userInfo.nickname }}</span>
          </li>
          <li class="flex jcsb cl">
            <span>绑定邮箱</span><span>{{ userInfo.email }}</span>
          </li>
          <li class="flex jcsb cl">
            <span>注册日期</span><span>{{ userInfo.createdAt }}</span>
          </li>
        </ul>
      </div>
      <h1 class="title1">基本资料</h1>
      <div class="content">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="基本资料" name="first">
            <div class="flex aic">
              <div style="width: 50px">昵称：</div>
              <el-input v-model="nickname"></el-input>
            </div>
            <el-button
              type="primary"
              @click="saveNickname"
              :disabled="!nickname"
              style="margin: 20px 0 0 45px"
              >保存</el-button
            >
          </el-tab-pane>
          <el-tab-pane label="修改密码" name="second">
            <cloud-form
              ref="ruleFormRef"
              v-model="form"
              :formConfig="config"
              :formRules="data.rules"
            ></cloud-form>
            <el-button
              type="primary"
              @click="setPassword(ruleFormRef)"
              style="margin: 0px 0 0 77px"
              >保存</el-button
            >
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { validPassword } from "~/utils/common/validation.js";
import { ref, reactive, onMounted } from "vue";
import { ArrowLeft } from "@element-plus/icons-vue";
import { mAxios } from "~/utils/axios/axios.js";
import { ElMessage } from "element-plus";
const userId = Number(sessionStorage.getItem("user_id"));
const activeName = ref("first");
const userInfo = ref({});
const nickname = ref("")
const ruleFormRef = ref();
const form = ref({});
const config = ref([
  {
    label: "新密码",
    prop: "password",
    type: "input",
    setting: {
      type: "password",
      placeholder: "请输入新密码",
    },
  },
  {
    label: "确认密码",
    prop: "confirmPwd",
    type: "input",
    setting: {
      type: "password",
      placeholder: "请确认新密码",
    },
  },
]);
const validatePass = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    if (form.value.confirmPwd !== "") {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField("confirmPwd", () => null);
    }
    callback();
  }
};
const validatePass2 = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请再次输入密码"));
  } else if (value !== form.value.password) {
    callback(new Error("两次输入的密码不一致！"));
  } else {
    callback();
  }
};
const data = reactive({
  rules: {
    password: [
      { required: true, message: "密码不能为空", trigger: "blur" },
    ],
    confirmPwd: [{ required: true, message: "请再次输入密码", trigger: "blur" },
    { validator: validatePass2, trigger: "blur" }],
  },
});
onMounted(() => {
  getMyInfo();
});
const saveNickname = () => {
  const params = {
    id: userId,
    nickname: nickname.value,
  };
  mAxios.put("auth/info", params).then((res) => {
    res.data.succeed
      ? ElMessage.success("修改成功")
      : ElMessage.error("修改失败");
    getMyInfo();
  });
};
const setPassword = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      const params = {
        id: userId,
        password: form.value.password,
      };
      mAxios.put("auth/info", params).then((res) => {
        res.data.succeed
          ? ElMessage.success("修改成功")
          : ElMessage.error("修改失败");
        form.value = {}
        getMyInfo();
      });
    }
  });
};
const getMyInfo = () => {
  mAxios.get("auth/info/" + userId).then((res) => {
    userInfo.value = res.data.data || {};
    nickname.value = res.data.data.nickname
  });
};
</script>

<style lang="scss" scoped>
.myAccount {
  width: 100%;
  // height: 100%;
  padding: 25px;
  background: #f7f7f7;
}
.title1 {
  margin-bottom: 25px;
  font-size: 17px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.content {
  box-sizing: border-box;
  margin: 0;
  padding: 10px 18px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  position: relative;
  background: #ffffff;
  border-radius: 8px;
  margin-bottom: 25px;
}
.cl {
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}
.btn {
  margin: 20px 0 0 20px;
}
</style>
